<!--
 * @Date: 2023-05-07 16:00:03
 * @LastEditTime: 2023-09-14 19:03:33

 * 介绍:
-->
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    modelVlaue?: number | [number, number];
    max?: StrNumber;
    min?: StrNumber;
    /**步长 */
    step?: StrNumber;
    /**进度条高度，默认单位为 px */
    barHeight?: StrNumber;
    /**滑块按钮大小，默认单位为 px */
    buttonSize?: StrNumber;
    /**进度条激活态颜色 */
    activeColor?: string;
    /**进度条非激活态颜色 */
    inactiveColor?: string;
    /**是否开启双滑块模式 */
    range?: boolean;
    /**是否将进度条反转 */
    reverse?: boolean;
    disabled?: boolean;
    readonly?: boolean;
    /**是否垂直展示 */
    vertical?: boolean;
  }>(),
  { barHeight: "22rem" }
);
const slot = useSlots();

const emit = defineEmits<{
  (e: "update:modelValue", v: number): void;
  (e: "change", v: number): void;
  (e: "drag-start", v: TouchEvent): void;
  (e: "drag-end", v: TouchEvent): void;
}>();
</script>
<template>
  <van-slider
    class="Rslider"
    v-bind="props"
    :model-value="props.modelVlaue"
    @change="(e) => emit('change', e)"
    @drag-start="(e) => emit('drag-start', e)"
    @drag-end="(e) => emit('drag-end', e)"
    @update:modelValue="(e) => emit('update:modelValue', e)"
  >
    <template v-if="slot.button" #button>
      <slot :value="props.modelVlaue" name="button"></slot>
    </template>
    <template v-if="slot['left-button']" #left-button>
      <slot :value="props.modelVlaue" name="left-button"></slot>
    </template>
    <template v-if="slot['right-button']" #right-button>
      <slot :value="props.modelVlaue" name="right-button"></slot>
    </template>
  </van-slider>
</template>
<style lang="scss" scoped></style>
